<template>
  <landscape-split-layout>
    <v-card slot="left" class="white--text" color="teal">
      <v-container fluid grid-list-lg>
        <v-layout row align-center>
          <v-flex xs7>
            <div>
              <div class="headline">{{$t('starting.iStudent')}}</div>
              <div>{{$t('starting.subIStudent')}}</div>
              <v-divider class="white"></v-divider>
              <v-btn to="/starting/student" flat dark class="title mt-4" style="font-weight: bold">{{$t('starting.join')}}</v-btn>
            </div>
          </v-flex>
          <v-flex xs5>
            <v-card-media
              :src="post.student"
              class="starting__post"
              height="270px"
              contain
            ></v-card-media>
          </v-flex>
        </v-layout>
      </v-container>
    </v-card>
    <v-card slot="right" class="white--text" color="pink">
      <v-container fluid grid-list-lg>
        <v-layout row align-center>
          <v-flex xs5>
            <v-card-media
              :src="post.admin"
              height="270px"
              class="starting__post"
              contain
            ></v-card-media>
          </v-flex>
          <v-flex xs7>
            <div>
              <div class="headline">{{$t('starting.iAdmin')}}</div>
              <div>{{$t('starting.subIAdmin')}}</div>
              <v-divider class="white"></v-divider>
              <v-btn to="/starting/admin" flat dark class="title mt-4" style="font-weight: bold">{{$t('starting.create')}}</v-btn>
            </div>
          </v-flex>
        </v-layout>
      </v-container>
    </v-card>
  </landscape-split-layout>
</template>

<script>
  import LandscapeSplitLayout from '@/views/layout/LandscapeSplitLayout'
  import PostAdmin from '@/assets/starting_post/admin.svg'
  import PostStudent from '@/assets/starting_post/student.svg'
  export default {
    name: 'starting',
    data: () => ({
      post: {
        admin: PostAdmin,
        student: PostStudent
      }
    }),
    components: { LandscapeSplitLayout }
  }
</script>

<style lang="scss" scoped>
  .starting__post {
    animation: duang 2s infinite alternate-reverse;
  }
  @keyframes duang {
    0% {
      transform: translateY(-10px);
    }
    100% {
      transform: translateY(0);
    }
  }
</style>
